<script setup lang="ts">
import { computed } from "vue";
import { CloseOutline } from "@vicons/ionicons5";
import { NIcon } from "naive-ui";
// const proxy = computed({
//     get() {
//         return props.modelValue;
//     },
//     set(val) {
//         emit("update:modelValue", val);
//     }
// });

const emit = defineEmits(["close", "update:modelValue"]);
const props = defineProps({
    show: Boolean,
    title: String
});

const onClose = () => {
    emit("close");
};
</script>

<template>
    <teleport to="body" v-if="show">
        <div class="j-pop">
            <div class="j-box">
                <div class="j-header">
                    <div class="j-title">{{ props.title }}</div>
                    <n-icon size="30" :component="CloseOutline" @click="onClose" class="j-close" />
                </div>
                <slot></slot>
            </div>
        </div>
    </teleport>
</template>

<style lang="less" scoped>
@import url("./index.less");
</style>
